{% extends "layout/base.html" %}
{% block title %} Accueil {% endblock %}

{% block content %}
{% include 'layout/header.html' %}
{% include 'layout/infosBox.html' %}
    <div class="container1" >
    <div id="myCarousel" class="carousel slide {{theme.color1}}">
        <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active yellow">
                <div class="container">
                    <div class="carousel-caption" id="slide1">
                        <h3 data-animate="fadeInLeftBig" class="text1">Vous manquez de temps ou avez besoin d'une aide ?</h3>
                        <h3 data-animate="fadeInLeftBig" class="text2">Sur Timeshop, des utilisateurs vous proposent leur temps pour vous aider.</h3>
                        <h3 data-animate="fadeInLeftBig" class="text3">Chaque utilisateur propose des catégories</h3>
                        <h3 data-animate="fadeInLeftBig" class="text4">Et des disponibilités qui pourraient vous intéresser</h3>
                        <img data-animate="rotateInUpRight" alt="slideUser" src="{{MEDIA_PATH}}img/slide/user.png" class="img3 right"  />
                    </div>
                </div>
            </div>
            <div class="item red">
                <div class="container">
                    <div class="carousel-caption">
                        <img data-animate="swing" alt="slideTime" src="{{MEDIA_PATH}}img/slide/time.png" class="img1 left" />
                        <h3 data-animate="swing" class="text2">Vous avez du temps dont vous ne savez pas quoi faire ?</h3>         
                        <h3 data-animate="swing" class="text3">Proposez votre temps à d'autres particuliers</h3>
                        <h3 data-animate="swing" class="text4 ">Et gagnez de l'argent en échange.</h3>
                        <img data-animate="rotateInUpRight" alt="slideMoney" src="{{MEDIA_PATH}}img/slide/money.png" class="img2 right"  />
                    </div>
                </div>
            </div>
            <div class="item orange">
                <div class="container">
                    <div class="carousel-caption">
                        <h3></h3>
                        <h3 data-animate="fadeInLeftBig" class="text1">Toi aussi devient vendeur.</h3>
                        <h3 data-animate="fadeInLeftBig" class="text2">Toi aussi vend ton temps et gagne de l'argent en échange d'un peu de temps.</h3>
                        <h3 data-animate="fadeInLeftBig" class="text3">Commence par choisir des catégories pour vendre des temps.</h3>
                    </div>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div> <!-- End Carousel -->
    </div> <!-- end of container -->

    <div id="content" class="{{theme.color3}}">
        <h4>Les derniers temps à vendre</h4>
    	{% include 'layout/result.html' %}
        {% include 'layout/module.html' %}
    </div>
    <script src="{{MEDIA_PATH}}js/jquery.onecarousel.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#myCarousel').oneCarousel({
            easeIn: 'rotateIn',
            pauseByHover: true,
            interval: 10000,
            pause: 'hover'
        });
    });
    </script>
    {% include 'layout/footer.html' %}
{% endblock %}